<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="jquery-1.11.0.min.js"></script>
</head>

<body>

    <div id="app">
        <h2>前后端分离案例</h2>
        <!-- 获取购物车数据 -->
        <table border="1">
            <tr v-for="cart in carts">
                <td>{{cart.id}}</td>
                <td>{{cart.goodsName}}</td>
                <td>
                    <button @subNum()>-</button> {{cart.nums}}
                    <button @addNum()>+</button>
                </td>
                <td>{{cart.price}}</td>
                <td>{{cart.nums * cart.price}}</td>
            </tr>
        </table>
    </div>
    <script>
        //将ajax封装到对象属性中    原型方法    
        Vue.prototype.send = function(url) {
            let res = null;
            $.ajax({
                url: url,
                type: "post",
                async: false, //同步    后面会学习发请求的配套插件
                cache: false,
                success: function(result) {
                    console.log(result);
                    res = result;
                }
            });
            return res; //null先返回了，然后数据才回来
        }

        //创建Vue对象
        new Vue({
            el: "#app",
            data: {
                carts: null //查看购物车数据
            },
            //挂载完毕 加载方法
            mounted: function() {
                let result = this.send("http://localhost:8080/cart/all");
                console.log(result);
                // 将数据赋值给carts
                this.carts = result;
            },



        });
    </script>
</body>

</html>